<template>
  <BasicModal :show="show" title="上传三方协议照片" width="30%" :widthComfirm="true" @comfirm="comfirm"
    @closeModal="closeModal">
    <template #content>
      <a-upload v-model:file-list="fileList" list-type="picture-card" action="#" accept=".png,.jpg" multiple
        :before-upload="beforeUpload" @preview="handlePreview">
        <div v-if="fileList && fileList.length < 4" class="uploader">
          <i class="iconfont icon-shangchuan"></i>
          <div style="margin-top: 8px">上传图片</div>
        </div>
      </a-upload>
    </template>
  </BasicModal>
  <a-modal :open="previewVisible" :title="previewTitle" :footer="null" @cancel="handleCancel">
    <img alt="example" style="width: 100%" :src="previewImage" />
  </a-modal>
</template>
<script setup lang='ts'>
import BasicModal from "./BasicModal.vue";
import type { UploadProps } from 'ant-design-vue';
import { message } from "ant-design-vue";
import {
  contractSigned, uploadContractFile
} from "@/api/application-details/index.ts";
import { comStores } from '@/store/common/comStore';
const store = comStores();
const show = ref<boolean>(false);
// const { resumeId, processId } = store.currentResume;
const { userName } = store.userInFor
const fileList = ref<UploadProps['fileList']>([]);
const previewVisible = ref<boolean>(false);
const previewImage = ref<string>('');
const previewTitle = ref<string>('');
import { ref } from "vue"
const emits = defineEmits(['surrender', 'dieOut', 'onSuccess'])



const beforeUpload = (fileList) => {
  return false;
}
const handleCancel = () => {
  previewVisible.value = false;
  previewTitle.value = '';
};
function getBase64(file: File) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}
const handlePreview = async (file: UploadProps['fileList'][number]) => {
  if (!file.url && !file.preview) {
    file.preview = (await getBase64(file.originFileObj)) as string;
  }
  previewImage.value = file.url || file.preview;
  previewVisible.value = true;
  previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf('/') + 1);
};

const comfirm = async () => {
  console.log(fileList.value);
  const formdata = new FormData()
  let resumeInfo: any = {}
  if (info.value.useItemInfo) {
    resumeInfo.resumeId = info.value.id;
    resumeInfo.processId = info.value.processId;
  } else {
    resumeInfo.resumeId = store.currentResume.resumeId;
    resumeInfo.processId = store.currentResume.processId;
  }

  // store.getResumeInfo(resumeId)
  let fileArr: File[] = []
  if (fileList.value?.length > 0) {
    fileList.value?.forEach((el, idx) => {
      const file = el.originFileObj as File;
      formdata.append('files', file);
    })
    formdata.append('resumeId', resumeInfo.resumeId)
    const res = await uploadContractFile(formdata);
    if (res && res.code === '10000') {
      message.success("上传附件成功")
    } else {
      message.error(res.msg)
      return
    }
  }
  let param = {
    resumeId: resumeInfo.resumeId,
    processId: resumeInfo.processId,
    result: "通过",
    operator: userName,
  }
  const data = await contractSigned(param)
  if (data && data.code === '10000') {
    message.success("操作成功")
    show.value = false
    emits('onSuccess')
  } else {
    message.error(data.msg)
  }
}
const info = ref<any>({});
const open = (params: Object) => {
  show.value = true
  info.value = params.info
}
const closeModal = () => {
  show.value = false
  fileList.value = []
}
defineExpose({ open, show })
</script>
<style lang="less" scoped>
.btns {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.uploader {
  color: #209ee4;
  font-weight: 400;
  font-size: 14px;
}

:deep(.ant-upload-select-picture-card) {
  border: 1px dashed rgba(32, 158, 228, 0.7) !important;
}

:deep(.ant-upload-list-item::before) {
  width: 100% !important;
  height: 100% !important;
}

:deep(.ant-upload-list-item) {
  padding: 0 !important;
  position: relative;
}

:deep(.anticon-delete) {
  width: 20px !important;
  height: 20px;
  background-color: #E85B5B;
  position: absolute;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -30px;
  right: -20px;
  color: #E85B5B;

  svg {
    font-size: 12px;
  }
}

:deep(.anticon-eye) {
  svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px
  }
}
</style>
